<template>
  <el-row :gutter="20">
    <el-col :span="3">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"

        background-color="#FFFFFF"
        text-color="#000000"
        active-text-color="#FF0000"
      >
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link :to="{name: 'Vip'}">会员中心</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link :to="{name: 'Cookbook'}">发布菜谱</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link :to="{name: 'Topics'}">话题</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link :to="{name: 'Log'}">日志</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">
            <router-link :to="{name: 'Menu'}">菜单</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">
            <router-link :to="{name: 'Collect'}">收藏</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-setting"></i>
          <span slot="title">
            <router-link :to="{name: 'Setting'}">账户设置</router-link>
          </span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="14">
      <div>
        <font size="4">
          <i class="el-icon-back"></i>
        </font>
        <span style="margin-left:10px">
          <font size="4">发布新话题</font>
        </span>
      </div>
      <hr />


      <div>

       <div>
         <img :src="$store.state.user.headimage" style="width: 100px;height: 100px;border-radius: 50%;float:left" />
         <label style="float:left;margin-top:5px;margin-left:15px; font-size:20px; color:#ff6767" >{{this.$store.state.user.petname}}</label>

          <div style="float:left;margin-top:5%;margin-left:-6%;width:50%;">
            <span style="margin-right:8%;font-size:20px">积分值&nbsp&nbsp<font>{{score * 10}}</font></span>
            <span style="margin-right:8%;font-size:20px">访客量&nbsp&nbsp<font>5</font></span>
          </div>

       </div>
          <div style="float:left;margin-top:5%;width:100%;">
            <span style="margin-right:8%;font-size:20px" @click="overFunction('cookbook')"  :class="{active:isActiveForMycookBook}">我的菜谱&nbsp&nbsp<font>{{cookbook.length}}</font></span>
            <span style="margin-right:8%;font-size:20px" @click="overFunction('topic')"  :class="{active:isActiveForMyTopic}">我的话题&nbsp&nbsp<font>{{topicList.length}}</font></span>
            <span style="margin-right:8%;font-size:20px" @click="overFunction('statoff')"  :class="{active:isActiveForMyStatoff}">我的收藏&nbsp&nbsp<font>{{myStatoff.length}}</font></span>
            <span style="margin-right:8%;font-size:20px" @click="overFunction('fouce')"  :class="{active:isActiveForMyFouce}">我的关注&nbsp&nbsp<font>{{myFoucs.length}}</font></span>
        <hr />
        <!-- 我的菜谱-->
            <div v-show="isShowCookBook">
             <el-table
                 :data="cookbook"
                 @row-click="goDetalis"
                 style="width: 100%">
                 <el-table-column
                   label="发布日期"
                   width="300">
                   <template slot-scope="scope">
                     <i class="el-icon-time"></i>
                     <span style="margin-left: 10px">{{scope.row.ordertime.split(" ")[0]}}</span>
                   </template>
                 </el-table-column>
                 <el-table-column
                   label="菜谱名称"
                   width="300" >
                   <template slot-scope="scope">
                     <el-popover trigger="hover" placement="top">
                       <p>浏览量: {{scope.row.pageview}}</p>
                       <p>收藏: {{scope.row.staroffs.length}}</p>
                       <div slot="reference" class="name-wrapper">
                         <el-tag size="medium">{{ scope.row.cbname }}</el-tag>
                       </div>
                     </el-popover>
                   </template>
                 </el-table-column>
                 <el-table-column label="操作">
                   <template slot-scope="scope">
                     <el-button
                       size="mini"
                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                     <el-button
                       size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                   </template>
                 </el-table-column>
               </el-table>
            </div>
         <!-- 我的话题 -->
            <div v-show="isShowTopic">
              <div class="hotnewsBox">
                        <div v-if="topicList.length != 0" v-for="topic in topicList" style="height: 100%;box-shadow: 0 1px 3px grey;margin-bottom: 13px;">
                              <div>
                                      <img :src="topic.user.headimage"  style="width:50px;height:50px;border-radius: 50%;"/>
                                      <div style="position: relative;left: 55px;top: -45px;">
                                      <label>{{topic.user.petname}}</label><br>
                                       <label style="font-size: 10px;color: cadetblue;">{{topic.time}}</label>
                                      </div>
                              </div>
                           <div style="margin-top:-25px">
                               <font color="blue">#{{topic.title}}#</font>
                              <font>{{topic.contents}}</font>
                          </div>

                           <div style="margin-top: 15px;">
                                  <span v-for="img in topic.image" style="margin-left: 5px;">
                                          <img :src="img.image" style="width:150px;height:150px;"/>
                                   </span>

                           </div>
                           <div style="margin-top: 10px;margin-left: 15px;">
                                  <font color="teal" > 10点赞</font>
                           </div>
                        </div>
                        <div v-if="topicList.length == 0">没有发布任何话题！</div>

              </div>
          </div>
          <div v-show="isShowStatoff">
          <!-- 我的收藏 -->
          <div v-if="myStatoff.length != 0">
            <div style="background-color: #66B1FF;width: 60%;height: 30px;padding-top: 15px;margin-bottom: 5px;">
              <span style="margin-right: 115px;margin-left: 40px;">菜谱图片</span>
              <span style="margin-right: 90px;">菜谱名称</span>
              <span>菜谱作者</span>
            </div>
              <div class="hotnewsBoxForStatoff" v-for="(statoff,index) in myStatoff" :key="index" @click="goDetalisforOff(statoff.cbid)">

                  <div style="position: relative;top: -28px;">
                    <el-image
                           style="width: 100px; height: 100px"
                           :src="statoff.finalcook"
                           fit="scale-down"></el-image>
                  </div>
                         <div style="position: relative;left: 190px;top: -95px;">
                           <div style="width: 120px;margin: 0;">{{statoff.cbname}}</div>
                           <div style="width: 60px;position: absolute;top: 0;left: 160px;">{{statoff.user.petname}}</div>
                         </div>
              </div>
          </div>
          <div v-if="myStatoff == 0" style="background-color:#DFF0D8">还没有关注任何欢乐达人！</div>
          </div>
          <!-- 我的关注 -->
              <div v-show="isShowFouce">
           
                 <div class="hotnewsBoxForStatoff"  v-if="myFoucs.length != 0" v-for="(facus,index) in myFoucs" :key="index">

                     <div style="position: relative;top: -28px;">
                       <el-image
                              style="width: 100px; height: 100px"
                              :src="facus.headimage"
                              fit="scale-down"></el-image>
                     </div>
                            <div style="position: relative;left: 140px;top: -95px;width: 70%;">



                              <div style="width: 60px;">{{facus.petname}}</div>
                              <div style="width: 60px;position: absolute;left: 100px;top: 0;">{{facus.vlog}}</div>
                               <span style="width: 60px;position: absolute;left: 230px;top: -8px;">
                                 <el-button  @click="delfocus(index)" type="danger" style="font-size: 12px;">取消关注</el-button>
                               </span>
                   </div>
                 </div>
                 <div v-if="myFoucs.length == 0" style="background-color:#DFF0D8">
                   还没有收藏任何菜谱！
                 </div>
              </div>
        </div>
      </div>
    </el-col>
  </el-row>


</template>

<script>
import FoodApi from "@/networks/api";
import axios from 'axios'

export default {
  data() {
    return {
      //默认是我的菜谱选中
      isActiveForMycookBook: true,
      isActiveForMyTopic: false,
      isActiveForMyStatoff:false,
      isActiveForMyFouce:false,

      isShowCookBook: true,
      isShowTopic: false,
      isShowStatoff:false,
      isShowFouce: false,

      topicList:[],
      cookbook:[],
      myFoucs:[],
      myStatoff:[],
      httpFlag : 0,
      score:0
    };
  },
  methods: {
     overFunction: function(value){

       if(value == 'cookbook'){
        this.getData("getCookBookByUid")
         //如果点击的是我的菜谱则将的菜谱的类变为true 我的话题的变成false
        this.isActiveForMycookBook = true,
        this.isActiveForMyTopic = false,
        this.isActiveForMyStatoff = false,
        this.isActiveForMyFouce = false,

        this.isShowCookBook = true,
        this.isShowTopic = false,
        this.isShowStatoff = false,
        this.isShowFouce = false
        // console.log(value)
   }
       if(value == 'topic'){
        this.getData("getTopicByUid")
        // console.log(this.topic)

         //反之
        this.isActiveForMycookBook = false,
        this.isActiveForMyTopic = true,
        this.isActiveForMyStatoff = false,
        this.isActiveForMyFouce = false,


        this.isShowCookBook = false,
        this.isShowTopic = true,
        this.isShowStatoff = false,
        this.isShowFouce = false
        // console.log(value)
       }
       if(value == 'fouce'){
        this.getData("getMyFocus")
        // console.log(this.topic)

         //反之
        this.isActiveForMycookBook = false,
        this.isActiveForMyTopic = false,
        this.isActiveForMyStatoff = false,
        this.isActiveForMyFouce = true,


        this.isShowCookBook = false,
        this.isShowTopic = false,
        this.isShowStatoff = false,
        this.isShowFouce = true
        // console.log(value)
       }

       if(value == 'statoff'){
        this.getData("getMyStatoff")
        // console.log(this.topic)

         //反之
        this.isActiveForMycookBook = false,
        this.isActiveForMyTopic = false
        this.isActiveForMyStatoff = true,
        this.isActiveForMyFouce = false,


        this.isShowCookBook = false,
        this.isShowTopic = false
        this.isShowStatoff = true,
        this.isShowFouce = false
        // console.log(value)
       }

     },
    //根据需查询相应的数据
    getData: function(url){

   let baseurl = 'api/consumer-index/UserCenter/' + url + "?uid=" + this.$store.state.user.uid
   if(this.httpFlag < 4){
     axios.get(baseurl).then(res =>{
       // this.tempData =  res.data
       if(url == 'getCookBookByUid'){ // 根据url的传参进行判断请求的值
          this.cookbook = res.data
          this.cookbook.map(c=>{//计算积分
          this.score = this.score + c.staroffs.length
        })
        this.httpFlag++
        return;
       }
       //获得topic
       if(url == "getTopicByUid"){
         this.topicList = res.data
         console.log(this.topicList)
         this.httpFlag++
         return;
       }
         //获得我的关注
       if(url == "getMyFocus"){
         this.myFoucs = res.data
         console.log(this.myFoucs)
         this.myFoucs.isfc = true
         this.httpFlag++
         return;
       }

         //获得我的收藏
       if(url == "getMyStatoff"){
         this.myStatoff = res.data
         console.log(res.data)
         this.httpFlag++
         return;
       }

     }).catch(res =>{
       return "请求错误！"
     })
   }
    },


    goDetalis: function(e){
      console.log(e.cbid)
      this.$router.push('itemlist/' + e.cbid )
      },
    goDetalisforOff: function(e){
     console.log(e)
     this.$router.push('itemlist/' + e )
    },

// 取消关注
        delfocus:function(index){
          let url = 'api/consumer-index/around_consumer/delfocus?' + 'uid=' + this.$store.state.user.uid + '&uided=' + this.myFoucs[index].uid

          axios.get(url).then(res => {
            this.myFoucs.splice(index,1)
          })
          },

//编辑和删除按钮
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
 created:function(){
   this.overFunction("topic")
   this.overFunction("fouce")
   this.overFunction("statoff")
   this.overFunction("cookbook")
   }
};
</script>
<style scoped>
.active{
  color: red;
  text-decoration: underline;
}
.hotnewsBox {
  width: 60%;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(100, 100, 100, 0.3);
}
.hotnewsBoxForStatoff{
  width: 60%;
  height: 80px;
  margin-bottom: 5px;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(100, 100, 100, 0.3);
}
</style>
